'use client';

import { shopStatusValues } from '@/lib/db/schema/enum';
import { adminShopSearchSchema } from '@/service/query/schema/shop';
import type { adminListShopsByPage } from '@/service/query/shop';
import { type ShopSummary, shopStatusMap } from '@/service/type/shop';
import type { ColumnDef, Table } from '@tanstack/react-table';
import dayjs from 'dayjs';
import Link from 'next/link';
import { Suspense, useRef } from 'react';
import DatePickerWithRange from '../common/date-range-picker';
import MultiSelector from '../common/multi-selector';
import SearchFilter from '../common/search-filter';
import TableLoading from '../common/table-loading';
import ShopStatusBadge from '../shop/shop-status-badge';
import { Button } from '../ui/button';
import DataTable from '../ui/data-table';
import ShopActionButton from './shop-action-button';

const shopColumns: ColumnDef<ShopSummary>[] = [
  {
    accessorKey: 'id',
    header: '店铺ID',
  },
  {
    accessorKey: 'name',
    header: '店铺名称',
  },
  {
    accessorKey: 'address',
    header: '店铺地址',
  },
  {
    accessorKey: 'contactPhone',
    header: '联系电话',
  },
  {
    accessorKey: 'createdAt',
    header: '注册时间',
    cell: ({ row }) => {
      const { createdAt } = row.original;
      return (
        <div className="text-nowrap">
          {dayjs(createdAt).format('YYYY-MM-DD HH:mm:ss')}
        </div>
      );
    },
  },
  {
    accessorKey: 'status',
    header: '状态',
    cell: ({ row }) => {
      const { status } = row.original;
      return <ShopStatusBadge status={status} />;
    },
  },
  {
    id: 'action',
    header: '操作',
    cell: ({ row }) => {
      return (
        <div className="py-1 flex items-center gap-1 text-lg">
          <ShopActionButton variant="ghost" shopData={row.original} />
          <Link href={`/admin/shop/${row.original.id}`}>
            <Button variant="ghost">详情</Button>
          </Link>
        </div>
      );
    },
  },
];

export default function ShopTable({
  pageData,
}: {
  pageData: ReturnType<typeof adminListShopsByPage>;
}) {
  const tableRef = useRef<Table<ShopSummary>>(null);

  return (
    <div className="space-y-5">
      <SearchFilter
        formSchema={adminShopSearchSchema}
        defaultValues={{
          id: '',
          name: '',
          address: '',
          contactPhone: '',
          dateRange: undefined,
          status: [],
        }}
        formItems={[
          { name: 'id', label: '店铺ID' },
          { name: 'name', label: '店铺名称' },
          { name: 'address', label: '店铺地址' },
          { name: 'contactPhone', label: '联系电话' },
          {
            name: 'status',
            label: '状态',
            inputComp: MultiSelector,
            options: {
              items: shopStatusValues.map((i) => ({
                label: shopStatusMap[i],
                value: i,
              })),
            },
          },
          {
            name: 'dateRange',
            label: '注册时间',
            inputComp: DatePickerWithRange,
          },
        ]}
      />
      <Suspense fallback={<TableLoading />}>
        <DataTable<ShopSummary>
          pageData={pageData}
          columns={shopColumns}
          ref={tableRef}
        />
      </Suspense>
    </div>
  );
}
